import React, {Component} from "react";
import {
	View,
	Text,
	Image,
	StyleSheet,
	FlatList,
} from "react-native";
import {observer} from "mobx-react/native";

import UseAPI from "../models/useAPI";

@observer
export default class FunnyContent extends Component {
	constructor(props) {
		super(props);
		this.state = {
			refreshing: false,
		}
	}
	componentDidMount() {
		UseAPI.fetchFunny();
	}
	_renderItems = ({item, index}) => (
		<View style={styles.containerImg}>
			<Text style={styles.conTextView}>{item.title}</Text>
			<Image style={{width: item.width/2, height: item.height/2}} source={{uri: item.thumburl}} />
		</View>
	)
	_keyExtractor(item) {
		return key = item.title;
	}
	_refreshing = () => {
		const {state} = this.props.navigation;
		UseAPI.fetchFunny().then(() => {
			setTimeout(() => {
				//判断网络连接状况;
				global.freshNetwork();
			}, 100)
		});
	}
	render() {
		return (
			<View style={styles.bgc}>
				<FlatList 
					data={UseAPI.funList}
					renderItem={this._renderItems}
					keyExtractor={this._keyExtractor}
					refreshing={this.state.refreshing}
					onRefresh={this._refreshing}
				/>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	bgc: {
		flex: 1,
		backgroundColor: gColor.bgColorTwo,
	},
	containerImg: {
		flex: 1,
		backgroundColor: gColor.fontColorFive,
		marginBottom: 10,
		alignItems: "center",
		paddingBottom: 8,
	},
	conTextView: {
		fontSize: gFontSize.one,
		marginTop: 10,
		marginBottom: 5,
		marginLeft: 10,
	}
})